/* 
 1.使用 vue-loader 来处理 vue文件 
 2.是否需要使用 babel-loader 处理js文件 ？
 3.处理scss 文件，vue 单文件组件 中如何拆分 vue 的 css 和 js ？ 如何 给单文件配置 预处理器，识别scss ？ 
 4. 图片处理，url-loader，  file-loader
*/
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isEslint = process.argv.includes('--eslint'); // 是否开启 eslint
const MODE = {
    dev: 'development',
    prod: 'production'
}
module.exports = {
    entry: {
        app: './src/main.js',
    },
    output: {
        filename: 'js/[name][hash:8].js',
        path: path.join(__dirname, './dist'),
        publicPath: process.env.NODE_ENV === MODE.dev ? '/' : './'
    },
    mode: process.env.NODE_ENV,
    // 配置别名
    resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src'),
        }
      },
    module: {
        // 配置 loader
        rules: [
            // 使用 babel 处理 js文件
            {
                test: /\.js$/,
                exclude: path.join(__dirname, "node_modules"),
                use: getJsLoader(isEslint)
            },
            {
                test: /\.css$/,
                use: getProdCssStyleLoader(process.env.NODE_ENV)
            },
            /* 配置 less */
            {
                test: /\.less$/,
                use: getProdLessStyleLoader(process.env.NODE_ENV)
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        esModule: false,
                        name: "img/[folder]/[name].[hash:8].[ext]",
                        limit: 1024 * 20, // 小于20k 将会直接被压缩
                    }
                }, ]

            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 1024 * 20,
                  name: 'media/[name].[hash:7].[ext]'
                }
              },
              {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                  limit: 1024 * 20,
                  name: 'fonts/[name].[hash:7].[ext]'
                }
              },
            /* 处理 vue 文件 */
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: 'style-loader!css-loader',
                        less: 'style-loader!css-loader!less-loader',
                        js: 'babel-loader'
                    },
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            templateParameters: {
                BASE_URL: '/',
                title: '测试'
            }
        }),
        new CopyWebpackPlugin({
            patterns: [{
                from: 'public',
                to: '',
                filter: (resourcePath) => {
                    // 将 index.html 忽略
                    if (/\index.html$/.test(resourcePath)) {
                        return false;
                    }
                    return true
                }
            }]
        }),
        new VueLoaderPlugin(), new MiniCssExtractPlugin({
            filename: 'css/[name].[hash:8].css'
        }), /* lessExtract */
    ]
}

function getProdCssStyleLoader(mode) {
    if (mode === MODE.dev) {
        return ['style-loader', 'css-loader','postcss-loader']
    }
    return [MiniCssExtractPlugin.loader, 'css-loader']
}

function getProdLessStyleLoader(mode) {
    if (mode === MODE.dev) {
        return ['style-loader', 'css-loader', 'postcss-loader','less-loader']
    }
    return [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}

function getJsLoader(openEslint) {
    if(openEslint){
        return [{
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        },'eslint-loader']
    }
    return [{
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }]
}